<script setup lang="ts"></script>

<template>
	<div class="circle-container">
		<div class="outer-circle"></div>
		<div class="inner-circle"></div>
	</div>
</template>

<style scoped lang="scss">
.circle-container {
	position: relative;
	width: 200px;
	height: 200px;
}

.outer-circle {
	width: 100%;
	height: 100%;
	border: 10px solid #c09da8;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	animation: rotate 2s linear infinite;
}

.inner-circle {
	width: 80px;
	height: 80px;
	background-color: #c09da8;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>
